<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>下拉菜单跳动</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		.box {
			position: relative;
			width: 600px;
			height: 300px;
			background: url("../images/6.jpg");
			/*		溢出隐藏*/
			overflow: hidden;
		}

		.box::before {
			/*		利用伪元素做文字说明*/
			content: "奥德赛 —— 亚索";
			position: absolute;
			top: -300px;
			left: 0;
			width: 600px;
			height: 300px;
			line-height: 300px;
			text-align: center;
			font-size: 30px;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
		}

		.box:hover::before {
			top: 0;
			animation: dropdown 2s;
		}

		/*	下降动画*/
		@keyframes dropdown {
			0% {
				top: -300px;
			}

			5% {
				top: 0;
			}

			10% {
				top: -30px;
			}

			20% {
				top: 0px;
			}

			30% {
				top: -20px;
			}

			40% {
				top: 0;
			}

			50% {
				top: -15px;
			}

			60% {
				top: 0;
			}

			70% {
				top: -10px;
			}

			80% {
				top: 0;
			}

			90% {
				top: -5px;
			}

			100% {
				top: 0;
			}
		}

		.container {
			position: absolute;
			top: 200px;
			width: 200px;
			height: 80px;
			background-color: teal;
		}

		.container:hover {
			animation: rubberBand 1s;
		}

		@keyframes rubberBand {
			0% {
				transform: scale3d(1, 1, 1);
			}

			35% {
				transform: scale3d(1.25, .75, 1);
			}

			45% {
				transform: scale3d(.75, 1, 1);
			}

			60% {
				transform: scale3d(1.2, .8, 1);
			}

			75% {
				transform: scale3d(1.05, .95, 1);
			}

			100% {
				transform: scale3d(1, 1, 1);
			}
		}
	</style>
</head>

<body>
	<div class="box"></div>

	<div class="container"></div>
</body>

</html>